<template>
  <div class="conterStyle">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">我的订单</el-breadcrumb-item>
      <el-breadcrumb-item>订单详情</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="line_from"></div>
    <div class="order_detail">
      <div class="order_info">
        <div class="order_title">订单号：1234567890</div>
        <div class="order_content">已支付</div>
        <div class="order_footer">支付方式：微信支付</div>
      </div>
      <div class="order_chart">
        <div class="order_chart_circular" v-if="false">
          <div class="order_chart_item">
            <div class="order_chart_item_nav" :class="{active:true}">1</div>
            <div class="order_chart_item_content">提交订单</div>
            <div class="order_chart_item_footer">2010-04-20 8:30</div>
          </div>
          <div class="order_chart_line" :class="{line_active:true}">----------------------</div>
          <div class="order_chart_item">
            <div class="order_chart_item_nav" :class="{active:true}">2</div>
            <div class="order_chart_item_content">付款成功</div>
            <div class="order_chart_item_footer">2010-04-20 8:32</div>
          </div>
          <div class="order_chart_line" :class="{line_active:false}">----------------------</div>
          <div class="order_chart_item">
            <div class="order_chart_item_nav" :class="{active:false}">3</div>
            <div class="order_chart_item_content">完成</div>
            <div class="order_chart_item_footer"></div>
          </div>
        </div>
		<div class="order_chart_circular" v-else>
          <div class="order_chart_item">
            <div class="order_chart_item_nav" :class="{active:true}">1</div>
            <div class="order_chart_item_content">提交订单</div>
            <div class="order_chart_item_footer">2010-04-20 8:30</div>
          </div>
          <div class="order_chart_line" :class="{line_active:true}">------------</div>
          <div class="order_chart_item">
            <div class="order_chart_item_nav" :class="{active:true}">2</div>
            <div class="order_chart_item_content">付款成功</div>
            <div class="order_chart_item_footer">2010-04-20 8:32</div>
          </div>
          <div class="order_chart_line" :class="{line_active:true}">------------</div>
          <div class="order_chart_item">
            <div class="order_chart_item_nav" :class="{active:true}">3</div>
            <div class="order_chart_item_content">申请退款</div>
            <div class="order_chart_item_footer">2010-04-20 8:36</div>
          </div>
		  <div class="order_chart_line" :class="{line_active:true}">------------</div>
          <div class="order_chart_item">
            <div class="order_chart_item_nav" :class="{active:true}">4</div>
            <div class="order_chart_item_content">已退款</div>
            <div class="order_chart_item_footer"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
</script>
<style lang="scss">
.conterStyle {
  padding: 0.2rem 0.3rem;
  background: #ffffff;
  .el-breadcrumb {
    font-size: 0.25rem;
    line-height: 1;
  }
  .line_from {
    height: 1px;
    margin: 0.24rem 0rem;
    background-color: #bbbbbb;
  }
  .order_detail {
    width: 100%;
    height: 1.9rem;
    border: 1px solid rgba(187, 187, 187, 1);
    .order_info {
      float: left;
      width: 30%;
      height: 100%;
      border-right: 1px solid rgba(187, 187, 187, 1);
      text-align: center;
      font-size: 25px;
      .order_title {
        padding-top: 0.2rem;
        height: 0.37rem;
        color: rgba(48, 48, 48, 1);
      }
      .order_content {
        padding-top: 0.32rem;
        height: 0.37rem;
        color: rgba(3, 148, 255, 1);
      }
      .order_footer {
        padding-top: 0.71rem;
        height: 0.27rem;
        font-size: 18px;
        color: rgba(48, 48, 48, 1);
      }
    }
    .order_chart {
      float: right;
      width: 70%;
      height: 100%;
      font-size: 25px;
      padding: 0.3rem 0.7rem 0.1rem 0.7rem;
      .order_chart_circular {
        display: flex;
        align-items: center;
        justify-content: space-around;
        .order_chart_item {
          width: 1.45rem;
          text-align: center;
          .order_chart_item_nav {
            margin: 0 auto;
            width: 0.7rem;
            height: 0.7rem;
            line-height: 0.7rem;
            font-size: 18px;
            color: rgba(94, 94, 94, 1);
            border: 1px solid rgba(187, 187, 187, 1);
            border-radius: 0.5rem;
          }
          .active {
            color: #0394ff;
            border: 3px solid rgba(3, 148, 255, 1);
          }
          .order_chart_item_content {
            padding-top: 0.11rem;
            height: 0.37rem;
            color: rgba(48, 48, 48, 1);
          }
          .order_chart_item_footer {
            padding-top: 0.11rem;
            height: 0.27rem;
            font-size: 18px;
            color: rgba(48, 48, 48, 1);
          }
        }
        .order_chart_line {
          margin-top: -1rem;
          height: 3px;
          color: rgba(187, 187, 187, 1);
        }

        .line_active {
          color: #0394ff;
        }
      }
    }
  }
}
</style>

<style scoped>
</style>
